<template>
  <div class="template">
    <!-- 搜索区域 -->
    <div class="search">
      <div class="search-center">
        <!-- 订单号搜索 -->
        <div class="search-item">
            <Input clearable
            v-model="search.orderNo"
            placeholder="订单号"
            style="width: 150px;"
            ></Input>
        </div>
        <!-- 支付单号搜索 -->
        <div class="search-item">
            <Input clearable
            v-model="search.payNo"
            placeholder="支付单号"
            style="width: 150px;"
            ></Input>
        </div>
        <!-- 支付平台单号搜索 -->
        <div class="search-item">
            <Input clearable
            v-model="search.tradeNo"
            placeholder="支付平台单号"
            style="width: 150px;"
            ></Input>
        </div>
        <!-- 状态筛选 -->
        <div class="search-item">
            <Select clearable
                style="width:100px;"
                v-model="search.status"
                :label-in-value="true"
                placeholder="状态"
                class="select"
              >
             <Option value="0" label="待支付"></Option>
             <Option value="1" label="已支付"></Option>
             <Option value="-1" label="已退款"></Option>
            </Select>
        </div>
        <!-- 日期范围选择 -->
        <div class="search-item">
          <DatePicker
            type="daterange"
            v-model="search.dateRange"
            placeholder="选择日期范围"
            style="width: 200px"
          ></DatePicker>
        </div>
        
        <!-- 查询按钮 -->
        <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button>

        <!-- 导出按钮 -->
        <Button
          style="width: 80px;margin-bottom:5px"
          type="primary"
          icon="ios-download-outline"
          @click="exportData"
        >导出</Button>
      </div>    
    </div>

    <!-- 表格区域 -->
    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <!-- 分页器 -->
        <template slot="footer">
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import {apiOrderpayList,apiOrderpayExport} from '@/api/payment-details.js'
import { getDateTime } from '@/libs/util'
export default {
  name: 'points-details',
  data () {
    return {
        // 路由查询参数
        query:{},
      // 搜索条件对象
      search: {
        orderNo:'',      // 订单号
        payNo:'',        // 支付单号
        tradeNo:'',      // 支付平台单号
        status:'',       // 支付状态
        dateRange: [],   // 日期范围
        pageNo: 1,       // 当前页码
        pageSize: 10,    // 每页条数
      },
      // 弹窗控制
      diyDom:{
        showModal:false
      },
      // 表格配置数据
      diyData: {
        columns: [
           // 商户号列
           {
            title: '商户号',
             width:'200px',
            key:'mchId',
          },
          // 订单号/支付单号列
          {
            title: '订单号/支付单号',
            width:'260px',
           render: (h, params) => {
              return h('div', [
                h('p', params.row.orderNo),
                 h('p', params.row.payNo),
              ])
             }
          },
          // 支付平台单号列
          {
            title: '支付平台单号',
            width:'280px',
            key: 'tradeNo',
          },
          // 金额列
          {
            title: '金额',
             width:'100px',
            key: 'amount',
          },
          // 退款列
          {
            title: '退款',
             width:'100px',
            key: 'refundAmount',
          },
          // 状态列
          {
            title: '状态',
             width:'100px',
             key: 'status',
             render: (h, params) => {
              var html = []
              switch (params.row.status) {
                case 0:
                  html.push(h('span',{
                    style: {color:'#808080'}
                  },params.row.statusName))
                  break
                case 1:
                  html.push(h('p',{
                    style:{color:'#2A82E4'}
                  },params.row.statusName))
                break
                 case -1:
                  html.push(h('p',{
                    style:{color:'#FF5733'}
                  },params.row.statusName))
                   break
                default:
                  html.push(h('p',{
                    style:{color:'#808080'}
                  },params.row.statusName))
              }
              return html
             }
          },
          // 支付时间列
          {
            title: '支付时间',
             width:'180px',
            key: 'completeTime',
          },
          // 退款时间列
          {
            title: '退款时间',
            width:'180px',
            key: 'refundTime',
          },
          // 备注列
          {
            title: '备注',
            width: '200px',
            key: 'remark',
            render: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: params.row.remark || '暂无备注',
                    maxWidth: 200,
                    placement: 'top'
                  }
                }, [
                  h('span', {
                    style: {
                      cursor: 'pointer',
                      display: 'inline-block',
                      width: '180px',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap'
                    }
                  }, params.row.remark || '暂无备注')
                ])
              ])
            }
          },
          // 空列（用于表格布局）
           {
            title: ' ',
          }
        ]
      },
      // API数据
      apiData: {
        total: 0,        // 总条数
        tableList: [],   // 表格数据
      }
    }      
  },
  methods: {
    // 页码改变处理
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    // 每页条数改变处理
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索处理
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    // 获取表格数据
    getTableList(){
      this.$store.commit('setSpinShow', true)  // 显示加载状态
      var opt = { ...this.search, ...this.query }
      
      // 处理日期范围参数
      if (this.search.dateRange && this.search.dateRange.length === 2) {
        opt.createTimeBegin = getDateTime(this.search.dateRange[0])
        opt.createTimeEnd = getDateTime(this.search.dateRange[1])
      }
      delete opt.dateRange

      // 调用API获取数据
      apiOrderpayList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data
        
        this.apiData.tableList = list
        this.apiData.total = totalCount
      }).finally(() => this.$store.commit('setSpinShow', false))
    },

    // 导出数据处理
    exportData() {
      var opt = { ...this.search, ...this.query }
      
      // 处理日期范围参数
      if (this.search.dateRange && this.search.dateRange.length === 2) {
        opt.createTimeBegin = getDateTime(this.search.dateRange[0])
        opt.createTimeEnd = getDateTime(this.search.dateRange[1])
      }
      delete opt.dateRange

     this.$store.commit('setSpinShow', true)
				apiOrderpayExport({...this.search}).then(res => {
						// this.diyDom.showExport = false
						const { data } = res
						const blob = new Blob([data])
						let disposition = decodeURI(res.headers['content-disposition'])
						// 从响应头中获取文件名称
						let fileName = disposition.substring(disposition.indexOf('fileName=') + 22, disposition.length)
						let text = fileName
						if ('download' in document.createElement('a')) {
							// 非IE下载
							const elink = document.createElement('a')
							elink.download = text.substring(0, text.length - 1)
							elink.style.display = 'none'
							elink.href = URL.createObjectURL(blob)
							document.body.appendChild(elink)
							elink.click()
							URL.revokeObjectURL(elink.href) // 释放URL 对象
							document.body.removeChild(elink)
						} else {
							// IE10+下载
							navigator.msSaveBlob(blob, fileName)
						}
					})
					.finally(() => this.$store.commit('setSpinShow', false))
    },

    // URL参数格式化
    formatParams(params) {
      return Object.keys(params)
        .filter(key => params[key] !== '' && params[key] !== null && params[key] !== undefined)
        .map(key => `${key}=${encodeURIComponent(params[key])}`)
        .join('&')
    },
  },
  // 组件挂载时执行
  mounted () {
    this.query = this.$route.query  // 获取路由查询参数
    this.getTableList()             // 获取表格数据
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
}
</style>
 